<template>
  <div>
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

      <van-swipe-item v-for="item, index in list" :key="index">
        <a :href="item.url"><img :src="item.img" alt=""></a></van-swipe-item>


    </van-swipe>

    <!-- 
    分类的九宫格
    -->
    <van-grid :column-num="4">
      <van-grid-item v-for="item, index  in classify " :key="index" :text="item.name">
        <template slot="icon">
          <div>
            <img width="50" height="50" :src="item.src" alt="">
          </div>
        </template>
      </van-grid-item>
      <!-- <van-grid-item text="3C产品">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu12.png" alt="">
          </div>
        </template>
      </van-grid-item> -->
      <!-- <van-grid-item text="超市">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu13.png" alt="">
          </div>
        </template>
      </van-grid-item>
      <van-grid-item text="服饰">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu15.png" alt="">
          </div>
        </template>
      </van-grid-item>
      <van-grid-item text="配送">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu16.png" alt="">
          </div>
        </template>
      </van-grid-item>
      <van-grid-item text="分类">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu17.png" alt="">
          </div>
        </template>
      </van-grid-item>
      <van-grid-item text="淘图">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu18.png" alt="">
          </div>
        </template>
      </van-grid-item>
      <van-grid-item text="淘文">
        <template slot="icon">
          <div>
            <img width="50" height="50" src="../assets/img/素材/menu19.png" alt="">
          </div>
        </template>
      </van-grid-item> -->
    </van-grid>

    <div class="gird">


      <goods v-for="item, index in goodslist" :key="index" :goods="item">
        <!-- <template>
          <div>
            替代匿名插槽
          </div>
        </template> -->

        <!-- <template #cid>
          <div>
            简写
          </div>
        </template> -->

      </goods>
    </div>

  </div>
</template>

<script>

import { getlunbo, recommend } from "@/api/home.js"
import a1 from "../assets/img/素材/menu10.png"
import a2 from "../assets/img/素材/menu12.png"
import a3 from "../assets/img/素材/menu13.png"
import a4 from "../assets/img/素材/menu15.png"
import a5 from "../assets/img/素材/menu16.png"
import a6 from "../assets/img/素材/menu17.png"
import a7 from "../assets/img/素材/menu18.png"
import a8 from "../assets/img/素材/menu19.png"
import goods from "../components/goods.vue"
export default {
  data() {
    return {
      value: "",
      list: [],
      goodslist: [],
      classify: [
        { name: "3C产品", src: a1 },
        { name: "3C产品", src: a2 },
        { name: "3C产品", src: a3 },
        { name: "服饰", src: a4 },
        { name: "配送", src: a5 },
        { name: "分类", src: a6 },
        { name: "淘图", src: a7 },
        { name: "淘文", src: a8 },
      ]
    }
  },

  components: {
    goods
  },
  //  为什么是在创建的时候发生请求  更新数据? 
  //  这是最快的时候, 只有创建后 data 中的数据有被创建出来
  async created() {


    let [result, result2] = await Promise.all([getlunbo(), recommend()])
    console.log(result, result2);
    this.list = result.message
    this.goodslist = result2.message
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
body {
  background-color: #f7f8fa;
}

.my-swipe img {
  width: 15rem;
  height: 8rem;

}

.gird {
  width: 15rem;

  display: grid;
  grid-template-columns: 1fr 1fr;

}
</style>